<template>
	<view class="customer-service">
		<view v-if="CurrentClient === 0"><!-- 会员 客服 --></view>
		<view v-else-if="CurrentClient === 1">
			<!-- 师傅  订单 -->
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
				<view slot="center">
					<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">订单</text>
				</view>
			</u-navbar>
			<view class="authentication-container w-750 b-box  bg-fa po-re">
				<view class="w-100 bg-ff b-box" style="margin-bottom: 20rpx;">
					<view
						class="d-flex flex-r ali-i-c just-c b-box bg-ff"
						style="height: 92rpx;width: 600rpx;"
					>
						<u-tabs
							:list="TabList"
							lineColor="#FFD300"
							@click="tabsClick"
							:inactiveStyle="{
								color: '#666666',
								fontSize: '32rpx',
								fontWeight: '400',
								fontFamily: 'PingFang SC'
							}"
							:activeStyle="{
								color: '#262626',
								fontSize: '32rpx',
								fontWeight: '500',
								fontFamily: 'PingFang SC'
							}"
							lineWidth="36rpx"
							:lineBottom="'12rpx'"
							:itemStyle="{ height: '88rpx', backgroundColor: 'rgba(255,255,255,0)' }"
							:current="TabCurrent"
							lineHeight="6rpx"
						></u-tabs>
					</view>
				</view>
				<!-- list -->
				<!-- swiper tabs标签 -->
				<view>
					<view class=" d-flex flex-c just-s ali-i-c orderbox" style="background-color: #eee;">
						<view class="ordercard" v-if="dataList.length > 0">
							<staff-order-card
								@Contact="Contact"
								@saomaCode="saomaCode"
								@liveGo="liveGo"
								@arriveGo="arriveGo"
								@completeClick="completeClick"
								v-for="(item, index) of dataList"
								:key="index"
								:staffList="item"
							/>
						</view>
						<!-- 空状态 -->
						<view
							v-else
							class=" d-flex flex-c ali-i-c just-c"
							:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
							v-else
						>
							<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
								数据为空
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 师傅 -->
			<Contact-the-customer
				ref="customModel"
				:show="ModelShow"
				:top="'30rpx'"
				:confirmText="confirmText"
				:success="ModelStatus"
				:cancelText="cancelText"
				:height="height"
				:width="width"
				:borderColor="borderColor"
				:color="color"
				@ModelCancel="ModelCancel"
				:userName="userName"
				:showCloseIcon="showCloseIcon"
				@cancel="ModelCancel"
				@confirm="ModelConfirm"
				:title="ModelTitle"
				:avatar="ModelAvatar"
			/>

			<u-popup
				:show="show"
				mode="bottom"
				overlayOpacity="0.6"
				:round="25"
				@close="close"
				@open="open"
			>
				<view style="width: 750rpx">
					<view
						style="text-align: center;font-weight: 500;
color: #333333;font-size: 32rpx;margin-top: 36rpx;"
					>
						{{ orderType == 1 ? '上传服务前的照片' : '上传服务后的照片' }}
						<view class="d-flex" style="margin-top: 75rpx 20rpx;">
							<view @click="uploadimg" style="display: flex">
								<view
									v-if="idoimage1.length > 0"
									style="margin: 20rpx auto;margin-left: 20rpx;margin-top: 40rpx;margin-bottom: 40rpx;"
									class="startimg"
								>
									<image
										v-for="item in idoimage1"
										:key="item"
										:src="item"
										mode="widthFix"
										style="width: 208rpx;height: 208rpx"
										@click="preveImg(item)"
									></image>
								</view>
								<!-- 'https://www.chejingjing.cn' + -->
								<view
									v-if="idoimage1.length < 3"
									style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 40rpx;margin-bottom: 40rpx;"
								>
									<image
										:src="require('../../static/add.png')"
										mode="widthFix"
										style="width: 208rpx;height: 208rpx;"
									></image>
								</view>
							</view>
						</view>
						<!-- 上传图片结束 -->
						<button class="btnstart" @click="btnstart">
							{{ orderType == 1 ? '开始服务' : '完成服务' }}
						</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { kefu, myorderlist, workerdone } from '@/common/api.js';
import ContactTheCustomer from './components/Contact-the-customer/Contact-the-customer.vue';

import staffOrderCard from '@/components/staff-order-card/staff-order-card.vue';

import { _tabContainerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
export default {
	components: {
		'staff-order-card': staffOrderCard,
		'Contact-the-customer': ContactTheCustomer
	},
	data() {
		return {
			CurrentClient: uni.getStorageSync('CurrentClient'), //0:用户；1：师傅
			containerHeight: '',
			///////////////////////////////////////////////
			//////////////////用户端///////////////////////////

			//////////////////用户端结束///////////////////////////
			///////////////////////////////////////////////

			// ///////////师傅//////////////////////
			// 模态框
			orderType: 1,
			show: false,
			ModelShow: false,
			ModelStatus: false, //客服
			ModelTitle: '',
			ModelAvatar: '',
			confirmText: '',
			cancelText: '',
			borderColor: '',
			color: '',
			height: '',
			width: '',
			userName: '',
			showCloseIcon: '',
			// 模态框
			listHeight: '',
			id: '',
			TabList: [
				{
					id: 0,
					name: '全部订单'
				},
				{
					id: 1,
					name: '待服务'
				},
				{
					id: 2,
					name: '进行中'
				},
				{
					id: 3,
					name: '已完成'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			dataList: [],
			page: 1,
			idoimage1: [],
			imgMd: []
			// ///////////师傅//////////////////////
		};
	},

	onPullDownRefresh() {
		this.page = 1;
		this.tabsClick();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		console.log('到底了');
		this.page = this.page + 1;
		this.tabsClick();
	},
	methods: {
		open() {
			this.show = true;
			this.idoimage1 = [];
		},
		close() {
			this.show = false;
			this.idoimage1 = [];
		},
		//现在触发
		liveGo(data) {
			let params = {
				token: uni.getStorageSync('usertoken'),
				oid: data.id
			};
			workerdone(params).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
					this.tabsClick();
				}
			});
		},
		toAdd(data) {
			console.log(data);
		},
		arriveGo(data) {
			let params = {
				token: uni.getStorageSync('usertoken'),
				oid: data.id
			};
			workerdone(params).then(res => {
				if (res.data.code === 1) {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
					this.tabsClick();
				}
			});
		},
		completeClick(data) {
			console.log('完成服务的id', data.id);
			this.id = data.id;
			this.open();
			this.orderType = 2;
			// let params = {
			// 	token: uni.getStorageSync('usertoken'),
			// 	oid: data.id
			// };
			// workerdone(params).then(res => {
			// 	console.log(res);
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: res.data.msg
			// 	});
			// 	this.tabsClick();
			// });
		},

		uploadimg() {
			//上传照片
			if (this.idoimage1.length < 3) {
				uni.chooseImage({
					success: res => {
						if (res.tempFilePaths.length > 3) {
							uni.showToast({
								title: '单词选择的照片大于3张,请重新选择',
								icon: 'none'
							});
							return;
						}
						if (this.idoimage1.length + res.tempFilePaths.length > 3) {
							uni.showToast({
								title: '多次选择的照片大于3张,请重新选择',
								icon: 'none'
							});
							return;
						}
						this.idoimage1.push(...res.tempFilePaths);
					}
					// success: chooseImageRes => {
					// 	const tempFilePaths = chooseImageRes.tempFilePaths;
					// 	const uploadTask = uni.uploadFile({
					// 		url: 'https://www.chejingjing.cn/api/index/uploadimg',
					// 		filePath: tempFilePaths[0],
					// 		name: 'photo',
					// 		formData: {
					// 			photo: tempFilePaths[0]
					// 		},
					// 		success: res => {
					// 			res = JSON.parse(res.data).data.url;
					// 			if (item == 1) {
					// 				this.idoimage1 = res;
					// 			} else if (item == 2) {
					// 				this.idoimage2 = res;
					// 			} else if (item == 3) {
					// 				this.idoimage3 = res;
					// 			}
					// 		}
					// 	});
					// }
				});
			}
		},
		preveImg(item) {
			uni.previewImage({
				urls: [item],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏', '删除'],
					success: function(data) {
						console.log(
							'选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'
						);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		//开始服务弹窗事件
		btnstart() {
			console.log(this.idoimage1.length);
			for (var i = 0; i < this.idoimage1.length; i++) {
				uni.uploadFile({
					url: 'https://www.chejingjing.cn/api/index/uploadimg',
					filePath: this.idoimage1[i],
					name: 'photo',
					formData: {
						photo: this.idoimage1[i]
					},
					success: res => {
						this.imgMd.push(JSON.parse(res.data).data.url);
					}
				});
			}

			setTimeout(() => {
				if (this.orderType == 1) {
					if (this.imgMd.length == 0 || this.imgMd == '') {
						uni.showToast({
							title: '请选择要上传的图片',
							icon: 'none'
						});
						return;
					}
					var params = {
						token: uni.getStorageSync('usertoken'),
						oid: this.id,
						hxcode: this.id,
						workerimages: this.imgMd.join(',')
					};
				} else if (this.orderType == 2) {
					if (this.imgMd.length == 0 || this.imgMd == '') {
						uni.showToast({
							title: '请选择要上传的图片',
							icon: 'none'
						});
						return;
					}
					var params = {
						token: uni.getStorageSync('usertoken'),
						oid: this.id,
						hxcode: this.id,
						wrimages: this.imgMd.join(',')
					};
				}
				workerdone(params).then(res => {
					if (res.data.code === 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.tabsClick();
						this.show = false;
						this.idoimage1 = [];
						this.imgMd = [];
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			}, 500);
		},
		saomaCode(data) {
			console.log('开始服务的id', data.id);
			this.open();
			this.id = data.id;
			this.orderType = 1;
		},
		///////////////////////////////////////////////
		//////////////////用户端///////////////////////////
		//获取客服的电话
		getPhone() {
			kefu().then(res => {
				console.log(res, 11111111111111);
			});
		},
		//////////////////用户端结束///////////////////////////
		///////////////////////////////////////////////

		// ///////////师傅//////////////////////
		//获取师傅的所有订单

		GoReadDetails(data) {
			//跳转到已完成订单详情页
			let _data = JSON.stringify(data);
			uni.navigateTo({
				url: `/pages/StaffOrderDetails/StaffOrderDetails?StaffOrder=${_data}`
			});
		},
		ClearRefre_() {
			for (let index = 0; index < 3; index++) {
				this.$set(this, `refresher_triggered${index}_`, false);
			}
		},

		tabsClick(index) {
			if (index) {
				this.page = 1;
				this.dataList = [];
				this.TabCurrent = index.id;
				this.ClearRefre_();
			}

			//加载不同的数据  border-1
			let params = {
				token: uni.getStorageSync('user').token,
				type: this.TabCurrent + 1,
				page: this.page
			};
			myorderlist(params).then(res => {
				var data = res.data;
				if (res.data.data.length > 0) {
					if (this.page == 1) {
						this.dataList = [];
						this.dataList = res.data.data;
					} else {
						this.dataList = this.dataList.concat(...res.data.data);
					}
				} else {
					if (this.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '暂无更多内容'
						});
						this.page = this.page - 1;
					}
				}
			});
		},
		Contact(data) {
			//联系
			// 弹出客户联系电话模态框
			console.log(data);
			this.ModelStatus = true; //客户
			this.ModelTitle = data.userinfo.mobile;
			this.confirmText = '拨打电话';
			this.borderColor = '2rpx solid #FF5C00';
			this.ModelAvatar = 'https://www.chejingjing.cn' + data.userinfo.avatar;
			this.color = '#FF5C00';
			this.cancelText = '';
			this.height = '74rpx';
			this.userName = data.userinfo.nickname;
			this.width = '240rpx';
			this.showCloseIcon = true;
			this.ModelShow = true;
		},
		ModelCancel() {
			//关闭模态框
			this.ModelShow = false;
		},
		ModelConfirm() {
			this.ModelShow = false;
			uni.makePhoneCall({
				phoneNumber: `${this.ModelTitle}`,
				complete(e) {
					console.log(e);
				}
			});
		}
		////////////////////师傅/////////////////////////
	},
	onShow() {
		this.CurrentClient = uni.getStorageSync('CurrentClient');
		console.log('home', uni.getStorageSync('CurrentClient'));
		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			curPages.getTabBar().setData({
				selected: 2
			});
		}
		if (this.CurrentClient === 0) {
			//用户端
			getApp().globalData.status = true; //跳转首页并打开首页模态框
			uni.switchTab({
				url: '/pages/UserHomePage/UserHomePage'
			});
		}
		if (this.CurrentClient === 1) {
			//师傅端
			this.tabsClick();
		}
	},
	onLoad() {
		this.containerHeight = _tabContainerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('98rpx'), 'px');
	}
};
</script>

<style lang="scss">
.customer-service {
}
.orderbox {
	.ordercard:last-child {
		padding-bottom: 100rpx;
	}
}
.btnstart {
	width: 670rpx;
	height: 88rpx;
	color: #fff;
	background: linear-gradient(180deg, #4885c5 0%, #3b52a6 100%);
	opacity: 1;
	line-height: 88rpx;
	border-radius: 88rpx;
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 140rpx;
}
.startimg > image:nth-child(1) {
	margin-left: 50rpx;
}
</style>
